<template>
  <div>
    <div class="text-center">
      <el-row :gutter="20" style="width: 100%">
        <el-col :span="4">
          <UserAvatar :img="userInfo?.avatar" />
        </el-col>
        <el-col :span="20">
          <el-descriptions>
            <el-descriptions-item :label="t('profile.user.username')"
              >{{ userInfo?.username }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('profile.user.certification')">
              <el-tag type="success">已认证</el-tag>
              <el-link style="margin-left: 5px" type="primary"
                >{{ t('profile.common.modify') }}
              </el-link>
            </el-descriptions-item>
            <el-descriptions-item :label="t('profile.user.id')"
              >{{ userInfo?.id }}
            </el-descriptions-item>
            <el-descriptions-item :label="t('profile.user.mobile')"
              >{{ userInfo?.mobile }}
              <el-link style="margin-left: 5px" type="primary"
                >{{ t('profile.common.modify') }}
              </el-link>
            </el-descriptions-item>
            <el-descriptions-item :label="t('profile.user.createTime')">
              {{ formatDate(userInfo?.createTime) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="info-modify">
        <el-col :span="20">
          <el-tabs
            v-model="activeName"
            class="profile-tabs"
            style="height: 400px"
            tab-position="top"
          >
            <el-tab-pane :label="t('profile.info.basicInfo')" name="basicInfo">
              <BasicInfo />
            </el-tab-pane>
            <el-tab-pane :label="t('profile.info.resetPwd')" name="resetPwd">
              <ResetPwd />
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
    <ul v-if="false" class="list-group list-group-striped">
      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:user" />
        {{ t('profile.user.username') }}
        <div class="pull-right">{{ userInfo?.username }}</div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:phone" />
        {{ t('profile.user.mobile') }}
        <div class="pull-right">{{ userInfo?.mobile }}</div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="fontisto:email" />
        {{ t('profile.user.email') }}
        <div class="pull-right">{{ userInfo?.email }}</div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="carbon:tree-view-alt" />
        {{ t('profile.user.dept') }}
        <div v-if="userInfo?.dept" class="pull-right">{{ userInfo?.dept.name }}</div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:suitcase" />
        {{ t('profile.user.posts') }}
        <div v-if="userInfo?.posts" class="pull-right">
          {{ userInfo?.posts.map((post) => post.name).join(',') }}
        </div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="icon-park-outline:peoples" />
        {{ t('profile.user.roles') }}
        <div v-if="userInfo?.roles" class="pull-right">
          {{ userInfo?.roles.map((role) => role.name).join(',') }}
        </div>
      </li>
      <li class="list-group-item">
        <Icon class="mr-5px" icon="ep:calendar" />
        {{ t('profile.user.createTime') }}
        <div class="pull-right">{{ formatDate(userInfo.createTime) }}</div>
      </li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { formatDate } from '@/utils/formatTime'
import UserAvatar from './UserAvatar.vue'

import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
import { BasicInfo, ResetPwd } from '@/views/Profile/components/index'

defineOptions({ name: 'ProfileUser' })

const { t } = useI18n()
const userInfo = ref({} as ProfileVO)
const getUserInfo = async () => {
  const users = await getUserProfile()
  userInfo.value = users
}
const activeName = ref('basicInfo')

onMounted(async () => {
  await getUserInfo()
})
</script>

<style scoped>
.text-center {
  position: relative;

  .info-modify {
    width: 100%;
    display: flex;
    justify-content: center;
  }
}

.list-group-striped > .list-group-item {
  padding-right: 0;
  padding-left: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.list-group {
  padding-left: 0;
  list-style: none;
}

.list-group-item {
  padding: 11px 0;
  margin-bottom: -1px;
  font-size: 13px;
  border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #e7eaec;
}

.pull-right {
  float: right !important;
}
</style>
